<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动轴滚动到头部或者底部</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #scrolldiv{
            width: 500px;
            height: 400px;
            margin: 1000px auto 100px auto;
            background-color: #f00;
        }
    </style>
</head>
<body>
<div id="scrolldiv"></div>
<script type="text/javascript">
    function scrollBottomOrTop() {
        var clients=window.innerHeight||document.documentElement.clientHeight
        var scrollTop=document.body.scrollTop;
        var wholeHeight=document.body.scrollHeight;
        if(clients+scrollTop>=wholeHeight){
            alert("我滚到了底部")
        }
        if(scrollTop==0){
            alert("我滚到了顶部")
        }
    }
    window.onscroll=scrollBottomOrTop;
</script>
</body>
</html>